#1、基于node11镜像打包前端项目
#基于node11镜像，且别名为build（这个步骤用于打包前端项目）
FROM node:11.15.0-alpine AS build

#定义环境变量，可以由docker-compose传入，下面先定义默认值
ARG BASE_API
ARG PORT

WORKDIR /opt/app/web

#复制当前前端项目到对应的工作目录

#注意：之前是/czq_portal，后面为了演示CI/CD流程改为了. ,根据自己的 docker-compose.yml 和 前端源码文件夹 的相对路径
#COPY ./czq_portal  /opt/app/web
COPY . /opt/app/web

# npm的一些配置，用于打包的一些配置，比如指定npm镜像仓库之类的
RUN npm config set unsafe-perm true
RUN npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ --global
RUN npm config set registry https://registry.npm.taobao.org --global
RUN npm config set disturl https://npm.taobao.org/dist --global
RUN npm install node-sass

#进入前端项目内安装依赖
RUN cd /opt/app/web && \
    npm install

#给指定变量赋值并打包 最终会输出静态文件到前端项目的dist目录
RUN BASE_API=$BASE_API PORT=$PORT  npm run build

#进入打包好的静态文件目录，并输出文件，可以查看
RUN cd /opt/app/web/dist && ls

#2、基于caddy反向代理工具部署前端项目
#基于caddy镜像实现容器内部反向代理，可以将上面的环境变量参数传入，也可以使用上面的别名
#当然也可以使用基于nginx镜像进行反向代理
FROM  abiosoft/caddy

#定义接收上一步的环境变量参数
ARG BASE_API
ARG PORT

#复制上一步镜像打包好的静态文件 到 本caddy容器的/var/www目录
COPY --from=build /opt/app/web/dist /var/www/

#将反向代理配置文件复制到caddy对应的目录，相当于nginx的nginx.conf文件，用于描述url路径跳转规则，这一点理解尤为重要，也是难点
#COPY ./czq_portal/Caddyfile /etc/Caddyfile
COPY ./Caddyfile /etc/Caddyfile
